<template>
	<!--view属性：hover-class="hover-content"-->
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<!--页面跳转并传递参数-->
		<text v-on:click="navTo">新闻中心</text>
		<!--添加open-type="redirect",则跳转后，关闭跳转前的页面-->
		<navigator url="../../subpackages/chat/chat" open-type="redirect">聊天页面</navigator>
		<!--添加open-type="redirect",跳转到tabbar页面-->
		<navigator url="/pages/list/list" open-type="switchTab">通讯录</navigator>
		<text v-on:click="handleRefresh">按钮触发下拉刷新</text>
		<!-- 添加class="box-item",实现页面触底 -->
		<text v-for="(item,index) in list" v-bind:key="index">
			元素:{{item}}
		</text>
		<text>
		<button type="primary" @click="handleGetRequest">发送get请求</button>
		<!-- <button type="primary" @click="Setstorage">存储数据</button>
		<button type="primary" @click="Getstorage">读取数据</button>
		<button type="primary" @click="Deletestorage">删除数据</button> -->
		</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list: ['test1', 'test2', 'test3', 'test4']
			}
		},
		onLoad() {
			console.log('页面展示了')
		},
		onReady() {
			console.log('页面初次渲染完成了')
		},
		onHide() {
			console.log('页面隐藏了')
		},
		onPullDownRefresh() {
			console.log('下拉刷新更新list')

			let time2 = setTimeout(() => {
				clearTimeout(time2)
				this.list = ['test1', 'test2']
				/*停止显示下拉刷新加载中图标*/
				uni.stopPullDownRefresh()
			}, 2000)
		},
		// onReachBottom() {
		// 	console.log('页面触底')
		// 	this.list = [...this.list, ...['test1', 'test2', 'test3', 'test4']]
		// },
		methods: {
			init() {},
			navTo() {
				/*常见跳转的几种方式*/
				/*uni.navigateTo 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。*/
				/*uni.navigateBack（关闭当前页面，返回上一页面或多级页面）*/
				/*uni.redirectTo（关闭当前页面，跳转到其他页面）*/
				/*uni.reLaunch（关闭所有页面，跳转到其他页面）*/
				/*uni.switchTab（适用于底部导航栏之间的跳转，或者跳转到底部导航栏（跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。））*/
				uni.navigateTo({
					url: '../../subpackages/news/news?name=123'
				})
			},
			handleRefresh() {
				uni.startPullDownRefresh()
			},
			handleGetRequest() {
				uni.request({
					url: "http://localhost:5000/api/banner/list",
					success(res) {
						console.log(res)
					}
				})
			},
			Setstorage() {
				uni.setStorage({
					key: 'name',
					data: '李志伟',
					success() {
						console.log('存储成功')
					}
				})
			},
			Getstorage() {
				uni.getStorage({
					key: 'name',
					success() {
						console.log('读取成功')
					}
				})
			},
			Deletestorage() {
				uni.removeStorage({
					key: 'name',
					success() {
						console.log('删除成功')
					}
				})
			}
		}
	}
</script>

<style>
	.font1 {
		color: red;
		font-family: "HYLeMiaoTi"; //在font.css中自定义的字体名称
	}

	.box-item {
		height: 100px;
		line-height: 100px;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.hover-content {
		width: 100%;
		height: 100%;
		border: 1px solid red;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
